<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div class="box">
           <!-- 
             <img src={{url}}>:这种写法是错误的，胡子语法只能在文本区域中出现，不能在标签的属性值当中出现
             <img src="url">:这种写法也是错误的，src属性的属性值就是字符串'url'
             <img src="{{url}}">:这种写法也是错误的，src属性的属性值就是字符串“{{url}}”
             <img v-bind:src="url"> v-bind:src,这代表的是动态属性
             v-bind指令的作用是，可以让标签的属性变为动态的【数据发生变化、标签的属性值页跟着变化】
         -->


      <!-- <input v-bind:type="leixing" name="" id=""> -->
      <!-- v-bind简写 ： -->
      <input :type="leixing" name="" id="">



    </div>
</body>
</html>
<script>

    const vm = new Vue({
        el:'.box',
        data:{
           leixing:'password'
        }
    })
</script>